<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
<style>

</style>
</head>
<body>
<style>
   .static{
      width:100px;
      height: 100px;
      border: 1px solid #000;
   }
   .bgcolor1{
      background-color:chocolate;
   }
   .bgcolor2{
      background-color: rgb(11, 7, 30);
   }
   .bodercolor{
      border: 5px dotted #05f04b;
   }
</style>
<div id="app">
   <div class="static" :class="isActive"></div>
   <br>
   <div class="static" :class="err"></div>
   <br>
   <div class="static" :class="[isActive,cls]"></div>
</div>

<script>
const app = {
   data() {
      return {
         isActive:'bgcolor1',
         err:'bgcolor2',
         cls: 'bodercolor'
      }
   }
}

Vue.createApp(app).mount('#app')
</script>
</body>
</html>
